<template>
  <div class="carsdetilview">
    <!-- 骨架 -->
    <!-- <van-skeleton title :row="3" /> -->
    <div v-if="infodata && querydata.type == 0 ">
      <van-form :colon="true">
        <van-field
          v-model="infodata.ownerName"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="车主姓名"
          label="车主姓名"
          placeholder="请输入车主姓名"
          :rules="[{ required: true, message: '请填写车主姓名' }]"
        />
        <van-field
          v-model="infodata.carPlate"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="车牌号码"
          label="车牌号码"
          placeholder="请输入车牌号码"
          :rules="[{ required: true, message: '请填写车牌号码' }]"
        />
        <van-field
          v-model="infodata.czrXm"
          required
          input-align="right"
          readonly
          :label-width="120"
          name="出租人姓名"
          label="出租人姓名"
          placeholder="请输入出租人姓名"
          :rules="[{ required: true, message: '请填写车主姓名' }]"
        />
        <van-field
          v-model="infodata.czrSfzh"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          :rules="[{ required: true, message: '请填写身份证号码' }]"
        />
        <van-field
          v-model="infodata.czrSjhm"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          v-model="infodata.czrYhzh"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="出租人银行账号"
          label="出租人银行账号"
          placeholder="请输入出租人银行账号"
          :rules="[{ required: true, message: '请填写出租人银行账号' }]"
        />
        <van-field
          v-model="infodata.czrKhyh"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="开户银行"
          label="开户银行"
          placeholder="请输入开户银行"
          :rules="[{ required: true, message: '请填写开户银行' }]"
        />
        <van-field
          v-model="infodata.czrGzdw"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="工作单位全称"
          label="工作单位全称"
          placeholder="请输入工作单位全称"
          :rules="[{ required: true, message: '请填写工作单位全称' }]"
        />

        <van-cell title="租赁期限起" :value="dateq"/>

        <van-cell title="租赁期限止" :value="datez"/>

        <van-field
          v-model="infodata.zjtcPrice"
          input-align="right"
          required
          readonly
          :label-width="120"
          name="套餐金额"
          label="套餐金额"
        />

        <van-field
          v-if="infodata.tcykzrPrice"
          v-model="infodata.jcfwfPrice"
          input-align="right"
          required
          readonly
          :label-width="120"
          name="基础服务费"
          label="基础服务费"
        />

        <van-field
          v-model="infodata.tcjcPrice"
          input-align="right"
          required
          readonly
          :label-width="120"
          name="套餐基础金额"
          label="套餐基础金额"
        />

        <van-field
          v-if="infodata.tcykzrPrice"
          v-model="infodata.tcykzrPrice"
          input-align="right"
          required
          readonly
          :label-width="120"
          name="套餐油卡转让金额"
          label="套餐油卡转让金额"
        />

        <van-field
          v-if="infodata.tcykzrPrice>= 500"
          v-model="infodata.ykzcYhkh"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="转出银行账号"
          label="转出银行账号"
          placeholder="请输入转出银行账号"
        />
        <van-field
          v-if="infodata.tcykzrPrice>= 500"
          v-model="infodata.ykzcKhyh"
          required
          readonly
          input-align="right"
          name="转出银行"
          label="转出银行"
          placeholder="请输入转出银行"
        />

        <van-field
          v-model="infodata.tcykczPrice"
          input-align="right"
          required
          readonly
          :label-width="120"
          name="套餐油卡充值金额"
          label="套餐油卡充值金额"
        />

      </van-form>
    </div>

    <div v-if="infodata && querydata.type == 1 ">
      <van-form :colon="true">
        <van-field
          v-model="infodata.ownerName"
          required
          readonly
          input-align="right"
          name="车主姓名"
          label="车主姓名"
          placeholder="请输入车主姓名"

        />
        <!-- <van-field v-model="infodata.carType" name="车辆型号" label="车辆型号" placeholder="请输入车辆型号" /> -->
        <van-field
          v-model="infodata.carPlate"
          required
          readonly
          input-align="right"
          name="车牌号码"
          label="车牌号码"
          placeholder="请输入车牌号码"
        />

        <van-field
          v-model="infodata.czrXm"
          required
          readonly
          input-align="right"
          name="出租人姓名"
          label="出租人姓名"
          placeholder="请输入出租人姓名"
        />
        <van-field
          v-model="infodata.czrSfzh"
          required
          readonly
          input-align="right"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
        />
        <van-field
          v-model="infodata.czrSjhm"
          required
          readonly
          input-align="right"
          name="手机号码"
          label="手机号码"
          placeholder="请输入手机号码"
        />
        <van-field
          v-model="infodata.czrYhzh"
          required
          readonly
          :label-width="120"
          input-align="right"
          name="出租人银行账号"
          label="出租人银行账号"
          placeholder="请输入出租人银行账号"
        />
        <van-field
          v-model="infodata.czrKhyh"
          required
          readonly
          input-align="right"
          name="开户银行"
          label="开户银行"
          placeholder="请输入开户银行"
        />
        <van-field
          v-model="infodata.czrGzdw"
          input-align="right"
          readonly
          name="工作单位全称"
          label="工作单位全称"
          placeholder="请输入工作单位全称"
        />

        <van-cell title="租赁期限起" :value="dateq" @click="dateshow('dateqshow')"/>
        <van-calendar v-model="dateqshow" @confirm="onConfirm"/>

        <van-cell title="租赁期限止" :value="datez" @click="dateshow('datezshow')"/>
        <van-calendar v-model="datezshow" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm"/>

        <van-cell required title="套餐金额">
          <template>
            <van-stepper step="500" min="1500" max="4500" integer v-model="infodata.zjtcPrice"/>
          </template>
        </van-cell>

        <van-cell required title="基础服务费" v-if="infodata.zjtcPrice>= 3000">
          <template>
            <van-stepper step="5000" min="5000" max="10000" input-width="40" integer v-model="infodata.jcfwfPrice"/>
          </template>
        </van-cell>

        <van-field
          v-model="infodata.tcjcPrice"
          input-align="right"
          readonly
          name="套餐基础金额"
          label="套餐基础金额"
        />
        <van-cell required title="套餐油卡转让金额">
          <template>
            <van-stepper step="500" min="0" :max="infodata.zjtcPrice - 500" integer v-model="infodata.tcykzrPrice"/>
          </template>
        </van-cell>
        <van-field
          v-if="infodata.tcykzrPrice>= 500"
          v-model="infodata.ykzcYhkh"
          required
          :label-width="120"
          input-align="right"
          name="转出银行账号"
          label="转出银行账号"
          placeholder="请输入转出银行账号"
        />
        <van-field
          v-if="infodata.tcykzrPrice>= 500"
          v-model="infodata.ykzcKhyh"
          required
          input-align="right"
          name="转出银行"
          label="转出银行"
          placeholder="请输入转出银行"
        />

        <van-field
          v-model="infodata.tcykczPrice"
          input-align="right"
          readonly
          :label-width="120"
          name="套餐油卡充值金额"
          label="套餐油卡充值金额"
        />


      </van-form>
      <div class="bottonbottom">
        <van-button type="info" @click="editinfo">确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from "vant";

  export default {
    name: "enterpriseCarCarDetail",
    data() {
      return {
        dateqshow: false,
        datezshow: false,
        datetype: 'dateqshow',
        querydata: {
          carId: undefined,
          type: undefined,
        },
        dateq: '',
        datez: '',
        infodata: {},
        maxDate: new Date(2120, 0, 31),
        minDate: new Date(),
      };
    },
    created() {
      this.querydata.carId = this.$route.query.id;
      this.querydata.type = this.$route.query.type;
      this.getData();
    },
    watch: {
      infodata: {
        deep: true,
        handler: function (e, v) {
          // console.log('油卡充值金额'+ this.infodata.tcykczPrice)
          // console.log('基础服务费'+ this.infodata.jcfwfPrice)
          // console.log('套餐基础金额'+ this.infodata.tcjcPrice)
          // console.log('油卡转让金额'+ this.infodata.tcykzrPrice)
          // console.log('油卡充值金额'+ this.infodata.tcykczPrice)
          this.infodata.tcykczPrice = this.infodata.zjtcPrice - this.infodata.tcjcPrice - this.infodata.tcykzrPrice; //油卡充值金额
          if(this.infodata.zjtcPrice < 3000) {
            this.infodata.jcfwfPrice = null;
          }
        }
      }
    },
    methods: {
      getData() {
        this.$Api.get("/api/cqhCar/getCarInfomation", this.querydata).then(res => {
          if (res.data.code == 200) {
            this.dateq = this.formatDate(res.data.data.car.czqxQ)
            this.datez = this.formatDate(res.data.data.car.czqxZ)
            this.infodata = res.data.data.car;
            if (!this.infodata.tcjcPrice) {
              this.infodata.tcjcPrice = 500;
            }
            if (!this.infodata.zjtcPrice) {
              this.infodata.zjtcPrice = 1500;
            }
            if (!this.infodata.tcykzrPrice) {
              this.infodata.tcykzrPrice = 0;
            }
          }
        });
      },
      editinfo() {
        if(this.infodata.tcykzrPrice>= 500 && !this.infodata.ykzcYhkh) {
          Toast("请输入转出银行账号");
          return
        }
        if(this.infodata.tcykzrPrice>= 500 && !this.infodata.ykzcKhyh) {
          Toast("请输入转出银行");
          return
        }
        this.$Api.post("/api/corp/updateCarInfo", this.infodata).then(res => {
          if (res.data.code == 200) {
            Toast("修改成功");
          } else {
            Toast(res.data.message);
          }
        });
      },
      dateshow(e) {
        this[e] = true;
        this.datetype = e;
      },
      onConfirm(date) {
        if (this.datetype == 'dateqshow') {
          this.infodata.czqxQ = Date.parse(date);
          this.dateq = this.formatDate(date);
        }
        if (this.datetype == 'datezshow') {
          this.infodata.czqxZ = Date.parse(date);
          this.datez = this.formatDate(date);
        }
        this.dateqshow = false;
        this.datezshow = false;
      },
      getshijianchuo(stringTime) {
        let timestamp2 = Date.parse(new Date(stringTime));
        //		timestamp2 = timestamp2;
        return timestamp2;
      },
      formatDate(a) {
        let now = new Date(a);
        let year = now.getFullYear(); //取得4位数的年份
        let month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
        let date = now.getDate(); //返回日期月份中的天数（1到31）

        return year + "-" + month + "-" + date;
      }
    }
  };
</script>

<style scoped>
  .carsdetilview {
    padding-bottom: 1px;
  }

  .carsdetil {
    margin: 0.5rem;
  }

  .carsdetilToCar {
    display: flex;
    align-items: center;
  }

  .carsdetilToCar1 {
  }

  .carsdetilToCar2 {
    line-height: 3rem;
  }

  .carsdetilToCar3 {
    width: 100%;
    line-height: 2rem;
    padding: 1rem;
  }

  .carsdetilToCar3info {
    display: flex;
  }

  .carsdetilToCar3infop {
    flex: 2;
  }

  .carsdetilToCar3infoimg {
    flex: 3;
  }

  .cardAndSh {
    box-shadow: 0 0 10px #c8c9c8;
    border: 0.1rem solid #b6b6b6;
    border-radius: 10px;
  }

  .bottonbottom {
    margin: 0.5rem 0.8rem;
    text-align: right;
  }

  .marginTB5remTR0 {
    margin: 0.5rem 0;
  }
</style>
